<template>
  <div class="app">
    <div class="header">
      <el-row class="header-center" :gutter="20" type="flex">
        <el-col :span="6" class="wrop-left lineCenter">
          <span class="header-logo" @click="ClickBoke">xxx的博客</span>
          <span class="header-txt"> 专注于放屁添风</span>
        </el-col>
        <el-col :span="12" class="wrop-center lineCenter">
          <el-row :gutter="20">
            <el-col :span="6" class="hei">
              <el-dropdown @command="Commands">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon-s-platform"></i>
                  web前端<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="icon-html iconfont" command="html"
                    >html</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-css" command="css"
                    >css</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="iconfont icon-java-script"
                    command="javascript"
                    >javascript</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="iconfont icon-typescript"
                    command="Typescript"
                    >Typescript</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-vue" command="vue"
                    >vue</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-react" command="react"
                    >react</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="iconfont icon-Fm8RVIQuNz"
                    command="webpack"
                    >webpack</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-less" command="less"
                    >less</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-gulp" command="gulp"
                    >gulp</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-nuxt1" command="nuxt"
                    >nuxt</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="6">
              <el-dropdown @command="Commands">
                <span class="el-dropdown-link">
                  <i
                    class="el-icon-arrow-down el-icon-s-platform iconfont icon-ruanjian"
                  ></i>
                  服务端<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="iconfont icon-node" command="node"
                    >node</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-PHP" command="php"
                    >php</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="iconfont icon-express"
                    command="express"
                    >express</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-koa" command="koa2"
                    >koa2</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="6">
              <el-dropdown @command="Commands">
                <span class="el-dropdown-link">
                  <i class="iconfont icon-SQLServerMySQL"></i>
                  数据库&git<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    icon="iconfont icon-mongoDB"
                    command="mongoDB"
                    >mongoDB</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-SQL" command="mysql"
                    >mysql</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-git" command="git"
                    >git</el-dropdown-item
                  >
                  <el-dropdown-item icon="iconfont icon-svn1" command="svn"
                    >svn</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="6">
              <el-dropdown @command="Commands">
                <span class="el-dropdown-link">
                  <i class="el-icon-date"></i>
                  音乐&生活<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-camera" command="life"
                    >生活</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-headset" command="music"
                    >音乐</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>

        <!-- header 右侧 -->
        <el-col :span="6" class="wrop-right lineCenter">
          <!-- 搜索框 -->
          <el-autocomplete
            size="medium"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
            :trigger-on-focus="false"
            suffix-icon="el-icon-search"
            @change="Changes"
          ></el-autocomplete>
        </el-col>
      </el-row>
    </div>

    <div class="container">
      <el-row :gutter="15">
        <el-col :span="18" class="container-left">
          <Nuxt />
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple-light container-right">
            <section name="" id="" class="title">
              <h4>博主简介</h4>
            </section>
            <section name="" id="" class="jianjie">
              <p>
                一位不知名的前端工程师，专注全栈技术，分享各种所遇问题与个人心得，梦想成为一位全栈大神！！！
              </p>
              <p>在这个寒冷的世界里，谁给你一丝温暖</p>
            </section>
          </div>

          <div class="weixin container-right">
            <section class="title">
              <h4>博主微信</h4>
            </section>
            <section class="wx-img">
              <img src="../static/weixin.jpg" alt="" />
            </section>
            <section class="wx-jianjie">
              <p>请扫描二维码，添加博主微信，备注为：博客-xxx</p>
            </section>
          </div>
        </el-col>
      </el-row>
    </div>

    <footer class="footer">
      <p>系统由 nuxt.js + Node + Element-Ui 驱动</p>
    </footer>

    <el-backtop></el-backtop>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "",
    };
  },
  methods: {
    Commands(command) {
      console.log(command);
      window.location = `/${command}/1`;
    },
    handleSelect(val) {
      window.location = `/details/${val._id}`;
    },
    async querySearchAsync(queryString, callback) {
      setTimeout(async () => {
        this.searchTitle(queryString, callback);
      }, 2000);
    },
    async searchTitle(queryString, cb) {
      let { data } = await this.$axios({
        method: "post",
        url: `http://localhost:3002/searchTitle?title=${queryString}`,
      });
      cb(data.data);
    },
    Changes(value) {
      console.log(value);
    },
    ClickBoke() {
      window.location = "/";
    },
  },
};
</script>

<style scoped lang="less">
.header {
  width: 100%;
  z-index: 4;
  position: fixed;
  background-color: white;
  height: 60px;
  box-shadow: 0.4px 0.4px 3px rgb(158, 157, 157);
  transform: translateY(-80px);

  .header-center {
    height: 100%;
    padding: 0px 10%;
    font-weight: 300;

    .wrop-left {
      align-items: baseline;
      .header-logo {
        color: #1890ff;
      }

      .header-txt {
        color: #999999;
        font-size: 10px;
      }
    }
    .wrop-center {
      font-size: 13px;

      a {
        text-decoration: none;
        color: #999999;
      }
    }

    .wrop-right {
      text-align: center;
    }

    .lineCenter {
      line-height: 60px;
    }
  }

  margin-bottom: 20px;
}

.container {
  height: 100%;
  margin: 0 10%;
  .container-left {
    min-height: 10px;
  }

  .container-right {
    background-color: white;
    padding: 20px;

    .title {
      h4 {
        margin: 5px 0px;
        color: rgb(93, 90, 90);
      }
    }
    .jianjie {
      color: #464646;
      font-size: 13px;
      margin-bottom: 100px;
    }
  }

  .weixin {
    margin-top: 20px;
    .wx-img {
      // width: 100%;
      display: flex;
      justify-content: center;

      img {
        width: 60%;
        padding: 20px;
      }
    }

    .wx-jianjie {
      font-size: 10px;
      color: #c9c9c9;
    }
  }
}

.footer {
  margin-bottom: 0px;
  background-color: #222222;
  height: 100px;
  // width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // position: absolute;
  // bottom: 0px;
  p {
    color: rgb(188, 189, 190);
    font-size: 14px;
  }
}

.app {
  padding: 80px 0px 0px 0px;
  // position: relative;
}
</style>
